<template>
	<view class="">
		<view class="eva_item">
			<view class="head_box">
				<u-image width="63rpx" height="63rpx" border-radius="50%" class="head_img" :src="item.handlUrl" mode="">
				</u-image>
				<view class="title">
					{{item.nickName}}
				</view>
			</view>
			<view class="imgs" v-if="imgUrls.length!==0">
				<u-row gutter="6">
					<u-col span="3" v-for="(img,index) in imgUrls" :key='index'>
						<u-image @click="checkBigimg(index)" border-radius='12' class="img" width="150rpx"
							height="150rpx" :src="img"></u-image>
					</u-col>
				</u-row>

			</view>
			<view class="content">
				{{item.comment}}
			</view>

			<view class="option_box">
				评分：{{item.score}}星 {{item.attrNames}}
			</view>
			<view class="type_box" v-if="item.title">
				<image class="icon" :src="item.imgUrl" mode="">
				</image>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</view>
		<u-gap height="14" bg-color="#ECECEC"></u-gap>
	</view>
</template>

<script>
	export default {
		name: "ZY-evaluate",
		props: {
			isGoods: {
				type: Boolean,
				default: true
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			imgUrls() {
				return this.item.imgUrls ? this.item.imgUrls.split(',') : []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			checkBigimg(index) {
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.imgUrls //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.eva_item {
		padding: 24rpx;

		.imgs {

			margin-top: 20rpx;

			.img {}
		}

		.type_box {
			display: flex;
			align-items: center;
			width: 100%;
			height: 66rpx;
			background-color: #F2F2F2;

			.title {
				@include ellipsisMultiline(1);
				color: #606060;
			}

			.icon {
				width: 66rpx;
				height: 66rpx;
				margin-right: 13rpx;

			}
		}

		.option_box {
			margin-bottom: 20rpx;
			color: #9B9B9B;
			font-size: 24rpx;
		}

		.content {
			color: #4A4A4A;
			font-size: 26rpx;
			margin: 16rpx 0;
		}
	}

	.head_box {
		display: flex;
		align-items: center;

		.title {
			font-size: 28rpx;
			color: #000;
		}

		.head_img {
			width: 63rpx;
			height: 63rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}
</style>
